<template>
    <div class="page-help">
        <van-nav-bar class="help-tilte" left-arrow :fixed="true" :title="$t('m.HowShopGoGoWorks')" @click-left="$router.back(-1)">
        </van-nav-bar>
        <div style="padding: 23px;"></div>
        <div class="title-box">{{$t('m.ForSellers')}}</div>
        <div class="step-box">
            <div class="step-head">
                <div class="step">{{$t('m.Step1')}}</div>
                <div class="step-txt">{{$t('m.Justsnapaphotooftheitem')}}</div>
            </div>
            <div class="step-body">
                <img src="../../static/img/images/how-works2.png" />
            </div>
            <div style="border-bottom: 2px solid #D7D7D7;"></div>
        </div>
        <div class="step-box">
            <div class="step-head">
                <div class="step">{{$t('m.Step2')}}</div>
                <div class="step-txt">{{$t('m.Chatwiththebuyerto')}}</div>
            </div>
            <div class="step-body">
                <img src="../../static/img/images/how-works5.png" />
            </div>
            <div style="border-bottom: 2px solid #D7D7D7;"></div>
        </div>
        <div class="step-box">
            <div class="step-head">
                <div class="step">{{$t('m.Step3')}}</div>
                <div class="step-txt">{{$t('m.Meetthebuyerexchange')}}</div>
            </div>
            <div class="step-body">
                <img src="../../static/img/images/how-works3.png" />
            </div>
        </div>
        <div class="title-box">{{$t('m.ForBuyers')}}</div>
        <div class="step-box">
            <div class="step-head">
                <div class="step">{{$t('m.Step1')}}</div>
                <div class="step-txt">{{$t('m.Browseanythingfromclothing')}}</div>
            </div>
            <div class="step-body">
                <img src="../../static/img/images/how-works4.png" />
            </div>
            <div style="border-bottom: 2px solid #D7D7D7;"></div>
        </div>
        <div class="step-box">
            <div class="step-head">
                <div class="step">{{$t('m.Step2')}}</div>
                <div class="step-txt">{{$t('m.Chatwiththeseller')}}</div>
            </div>
            <div class="step-body">
                <img src="../../static/img/images/how-works1.png" />
            </div>
            <div style="border-bottom: 2px solid #D7D7D7;"></div>
        </div>
        <div class="step-box" style="margin-bottom: 30px">
            <div class="step-head">
                <div class="step">{{$t('m.Step3')}}</div>
                <div class="step-txt">{{$t('m.Meettheseller')}}</div>
            </div>
            <div class="step-body">
                <img src="../../static/img/images/how-works6.png" />
            </div>
        </div>

    </div>
</template>
<script>
    export default {
        name: 'HowWorks',
        data() {
            return {
                activeName: '1'
            };
        }
    }

</script>
<style>
    .page-help .van-nav-bar{
        background-color: #FF9900;
        color: #fff;
    }
    .page-help .van-nav-bar .van-icon{
        color: #fff;
        margin-right: 15px;
        font-size: 18px;
    }
    .page-help .van-list__loading{
        width: 100%;
        /*border-top: 1px solid #F2F2F2;*/
    }
    .page-help .van-nav-bar__title{
        max-width: 80%;
    }
</style>
<style scoped>
    .title-box{
        font-weight: 700;
        color: #fff;
        background: #868686;
        font-size: 18px;
        padding: 12px;
        text-align: center;
    }
    .step-box{
        padding: 0 4%;
    }
    .step-head{
        position: relative;
        display: flex;
        padding: 15px 0 8px 0;
        align-items: center;
    }
    .step{
        padding: 8px 5px;
        background: #868686;
        white-space: nowrap;
        color: #fff;
        border-radius: 5px;
    }
    .step-txt {
        padding-left: 4%;
    }
    .step-body {
        padding: 15px 0 25px 0;
    }
    .step-body img {
        margin: 0 auto;
        display: block;
    }
 </style>
